<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜拳练习</title>
    <style>
        .container {
            width: 700px;
            margin: 0px auto;
        }

        table {
            width: 700px;
            height: 600px;
            border: 1px solid black;
            text-align: center;
        }

        td {
            border: 1px solid black;
        }

        .ready {
            color: red;
            font-size: 40px;
            line-height: 100px;
        }

        .result {
            line-height: 30px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let win = 0;
            let defeat = 0;
            let deuce = 0;
            $("#choice").click(function () {
                let selectValue = $("#choice").val();
                if (selectValue == 1) {
                    $("#yourChoice img").attr("src", "../images/st.jpg");
                } else if (selectValue == 2) {
                    $("#yourChoice img").attr("src", "../images/jd.jpg");
                } else if (selectValue == 3) {
                    $("#yourChoice img").attr("src", "../images/bu.jpg");
                } else {
                    $("#yourChoice img").attr("src", "../images/zb.jpg");
                }
            });
            $("#confirm").click(function () {
                // 你出拳
                let selectValue = $("#choice").val();
                if (selectValue == 1) {
                    $("#your img").attr("src", "../images/st.jpg");
                } else if (selectValue == 2) {
                    $("#your img").attr("src", "../images/jd.jpg");
                } else if (selectValue == 3) {
                    $("#your img").attr("src", "../images/bu.jpg");
                } else {
                    $("#your img").attr("src", "../images/zb.jpg");
                }

                // 电脑出拳,随机生成一个[1,3]整数,分别对应石头、剪刀、布
                let x = parseInt(Math.random() * 3 + 1);
                if (x == 1) {
                    $("#computer img").attr("src", "../images/st.jpg");
                } else if (x == 2) {
                    $("#computer img").attr("src", "../images/jd.jpg");
                } else if (x == 3) {
                    $("#computer img").attr("src", "../images/bu.jpg");
                }

                // 结果判定
                let minus = selectValue - x;
                if(minus == 0){
                    $(".ready").html("真可惜,是个平局!");
                    deuce++;
                } else if(minus == -1 || minus == 2){
                    $(".ready").html("恭喜您,您赢了!");
                    win++;
                } else{
                    $(".ready").html("对不起,失败了!");
                    defeat++;
                }

                $("#count").html(win+defeat+deuce);
                $("#win").html(win);
                $("#defeat").html(defeat);
                $("#deuce").html(deuce);
            });
        })
    </script>
</head>
<body>
<div class="container">
    <table>
        <tr>
            <td>
                你
                <div id="your">
                    <img src="../images/zb.jpg" alt="图片加载失败">
                </div>
            </td>
            <td>VS</td>
            <td>
                电脑
                <div id="computer">
                    <img src="../images/zb.jpg" alt="图片加载失败">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" class="ready">Are You Ready?</td>
        </tr>
        <tr>
            <td>
                你选择了:
                <div id="yourChoice">
                    <img src="../images/zb.jpg" alt="图片加载失败">
                </div>
            </td>
            <td>Choice</td>
            <td>
                请选择出拳:<br><br>
                <div>
                    <select id="choice">
                        <option value="0">请选择</option>
                        <option value="1">石头</option>
                        <option value="2">剪刀</option>
                        <option value="3">布</option>
                    </select>
                    <button id="confirm">确认出拳</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" class="result">
                总数:<span id="count">0</span>
                胜利:<span id="win">0</span>
                失败:<span id="defeat">0</span>
                平局:<span id="deuce">0</span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>